<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.3);
            /*以html为视口(view port)为参照物,紧贴四个边,实现撑满全屏的效果*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cum doloremque error numquam praesentium
        similique. Beatae dolorum ipsa labore laboriosam magnam neque non, perferendis quos reiciendis rem, rerum saepe
        tempore?
    </div>
    <div>Accusantium animi at cumque delectus dicta ducimus ea error est expedita facilis ipsa iste iure iusto
        laudantium minima minus nemo quae ratione recusandae rem sit soluta tempora ullam, veritatis vitae!
    </div>
    <div>Amet assumenda at consequatur ex nulla possimus quibusdam tempore. Asperiores assumenda debitis doloremque
        dolores ducimus expedita incidunt ipsam iusto maxime necessitatibus, non, placeat praesentium quidem, quisquam
        quo soluta voluptatem voluptates.
    </div>
    <div>Amet, at, atque consectetur corporis distinctio dolor dolorum eligendi eum excepturi expedita facilis ipsam
        ipsum iure libero, nam nesciunt nisi nobis obcaecati odit sed! Alias blanditiis deleniti id libero temporibus?
    </div>
    <div>Eius enim eveniet inventore, magni necessitatibus officiis possimus reprehenderit tempore veritatis voluptas?
        Alias atque consectetur consequatur deleniti dolore dolorum ea explicabo illo inventore ipsa, nihil nisi,
        tempore, tenetur ut voluptas.
    </div>
    <div>Aliquid, at commodi earum eos odio quam quisquam saepe ullam vitae? Ad atque dolores ducimus eaque, eos, error
        exercitationem laboriosam, neque odio pariatur quia rem repellat tenetur vitae voluptas voluptatem.
    </div>
    <div>Aliquid architecto aspernatur blanditiis commodi debitis deserunt eos esse facilis hic ipsam laborum magnam
        minus mollitia nulla officiis perspiciatis qui quibusdam quis sed similique sint sunt, tenetur unde vitae
        voluptas?
    </div>
    <div>Accusamus cum debitis ducimus eum ipsum itaque labore laboriosam libero maiores nihil nulla officiis quo quos
        repudiandae, rerum temporibus voluptas. Ab at autem dolorem, ducimus ipsa iste nostrum perspiciatis praesentium?
    </div>
    <div>Deserunt distinctio dolor dolores doloribus, ea eaque eum iusto nam nihil numquam perspiciatis quam sint sit
        tempore ullam veniam voluptatum? Accusantium aut delectus laborum necessitatibus nihil perspiciatis quasi
        ratione sapiente.
    </div>
    <div>Accusantium animi aspernatur assumenda beatae commodi consequatur delectus deleniti distinctio eius, et eum
        expedita explicabo, fugit impedit iste nulla, odio officiis perferendis reiciendis saepe sed sunt unde ut vero
        voluptates!
    </div>
    <div>Aliquam consequuntur debitis dicta dolorem, ea earum error, expedita magnam minima natus nihil sed suscipit
        tempore unde ut veniam vero! Et eveniet exercitationem fugit in incidunt nobis rem sed temporibus?
    </div>
    <div>Ab accusantium autem dignissimos eius eos, fugit harum inventore ipsa obcaecati omnis, possimus tenetur velit
        vitae. Accusamus aliquam amet atque fugiat illo nihil ratione sunt! Eius fuga non rerum sequi.
    </div>
    <div>Ab amet autem commodi consequuntur ducimus error facere harum incidunt mollitia nam quia, sed soluta voluptas?
        Eveniet ex exercitationem fuga fugiat fugit ipsam numquam odio, perferendis porro quisquam reiciendis vel.
    </div>
    <div>Aliquid aperiam beatae consequatur culpa cum dolor dolore doloribus dolorum, ea facilis id inventore, iusto
        laboriosam minima natus nostrum odit perspiciatis possimus quo reiciendis rem repellendus suscipit ullam veniam
        voluptas.
    </div>
    <div>A consectetur distinctio dolore doloribus ducimus ea enim explicabo harum id ipsa labore magnam necessitatibus
        odit, porro quam quas qui quidem quos reiciendis rem reprehenderit sapiente sed sequi vitae voluptatum?
    </div>
    <div>Aliquam aliquid aut blanditiis debitis, deserunt dicta dolorum ducimus earum incidunt inventore labore
        laudantium mollitia odit, perferendis quidem repellendus ullam unde. Aliquid atque eligendi expedita minus nam
        odit officia sapiente.
    </div>
    <div>Accusamus accusantium aliquam at atque aut blanditiis corporis, cum dignissimos distinctio eos esse eum illo
        ipsam labore, laboriosam nemo nostrum nulla perferendis quaerat repellat repudiandae saepe sapiente temporibus
        velit voluptatem!
    </div>
    <div>Deserunt dolorem ea laboriosam numquam, perferendis saepe sed sint? Aliquam asperiores aspernatur cupiditate
        deleniti dolorum et impedit ipsam, maxime modi molestias nisi nobis pariatur quas quos voluptate. Iusto,
        tempore, velit.
    </div>
    <div>Accusantium ad asperiores at aut cum debitis dicta dolorum ea fugiat impedit incidunt ipsam laborum magni non
        omnis, provident quae quam quibusdam, reiciendis sapiente sit tempora ullam vero voluptas voluptates.
    </div>
    <div>Autem consequatur deserunt distinctio dolor dolorem exercitationem impedit, incidunt maxime natus nesciunt
        officiis repellat voluptates. Animi in minima mollitia perferendis, quisquam repellendus voluptatum. Accusamus
        doloribus eum iure molestias sequi tempora?
    </div>
    <div>Aperiam aspernatur at debitis, deserunt eos eum eveniet exercitationem harum id ipsam libero, magni nemo nihil
        odit perspiciatis porro quaerat quam quia sapiente, suscipit. Atque, autem, possimus. Commodi tenetur,
        voluptatum!
    </div>
    <div>Eveniet fugit repellendus sequi vitae! Ab aliquid eveniet excepturi fugiat iure iusto minima, minus non
        officiis, quae qui quod repudiandae unde voluptas voluptatem. Eaque earum exercitationem impedit maxime nostrum
        quod.
    </div>
    <div>Dignissimos explicabo fugit nostrum voluptate. Adipisci in repudiandae sed. Accusamus accusantium consequatur
        doloremque dolorum, eaque error est fugit in incidunt nisi odit officiis optio praesentium quo saepe vel velit
        vero.
    </div>
    <div>Ab accusamus aliquam aperiam atque blanditiis commodi corporis cupiditate debitis deserunt exercitationem hic
        ipsa, ipsam neque nostrum obcaecati officiis porro provident quam, qui quibusdam quisquam quo quod quos sapiente
        sunt!
    </div>
    <div>Animi debitis dolorum iste, laudantium molestias natus perferendis porro quod. Accusantium adipisci architecto
        aspernatur assumenda dignissimos, eum expedita fuga magnam magni maxime minima minus natus quod ratione sed vel
        voluptatibus!
    </div>
    <div>A aliquid explicabo illo magni non odio officia pariatur perspiciatis ratione ut? Ad asperiores assumenda
        blanditiis commodi, deleniti deserunt dignissimos facilis illo, nesciunt nihil odio officia quis repellendus
        suscipit voluptate.
    </div>
    <div>Dolore enim illum ipsam magnam nihil omnis quisquam quo rerum. Architecto cum est illum in tempora temporibus
        ullam vitae. Dignissimos iure maiores nemo, placeat qui reprehenderit repudiandae sequi vel voluptatem.
    </div>
    <div>Ab assumenda corporis delectus facere itaque, officiis omnis possimus quos, repellendus sequi suscipit tempore
        vero. At aut delectus molestias quasi rem repudiandae? Autem error incidunt mollitia nostrum porro repudiandae
        tempore.
    </div>
    <div>Aliquid animi aperiam blanditiis, culpa cumque dignissimos, ducimus ea enim fugiat impedit inventore itaque
        perferendis porro provident reprehenderit sint, unde. Adipisci consectetur magni non optio quae quia recusandae
        rerum voluptates?
    </div>
    <div>A aliquam aperiam, asperiores commodi cum dolor dolores esse, expedita ipsam ipsum iure iusto laudantium
        molestiae nobis repellat repudiandae saepe sequi ut voluptas voluptatem! Dicta harum in maiores saepe vel!
    </div>
    <div>Possimus, qui, sit! Accusamus alias amet blanditiis delectus dignissimos dolorem eos error ex, excepturi fuga
        fugit, in ipsam magni molestiae quia quibusdam quod quos saepe, suscipit tempora temporibus totam ut.
    </div>
    <div>Assumenda dicta id maxime nemo nostrum numquam quisquam quod voluptatem! Alias consequatur doloribus enim et ex
        impedit ipsa, ipsam libero perferendis recusandae similique soluta sunt vel? Hic ipsa nulla similique?
    </div>
    <div>Omnis, quos reiciendis! Illo ipsa laudantium porro temporibus. A ab architecto assumenda culpa delectus
        exercitationem harum illo nam neque, nostrum nulla quaerat qui, ullam. Fuga in nam natus rerum totam.
    </div>
    <div>Aliquam aliquid architecto atque blanditiis, excepturi inventore iste iure libero non odio porro provident sed
        tempore ut veritatis vero voluptates! Corporis et ex illum itaque iure laborum nulla optio praesentium?
    </div>
    <div>Aliquid at consequuntur cumque est incidunt ipsum laborum officiis quibusdam voluptas! Laborum odio qui
        voluptas? A accusantium aspernatur atque corporis dolorem esse expedita facilis fugit nostrum omnis, quae
        quisquam quo.
    </div>
    <div>Debitis id, iste magni perspiciatis porro quidem reiciendis. Deleniti dolore dolorum ducimus esse, laboriosam
        necessitatibus nulla, obcaecati odio quidem quisquam rerum sequi. Accusamus asperiores, aut illum labore magnam
        reprehenderit tenetur?
    </div>
    <div>Blanditiis corporis debitis dolores error facere mollitia omnis qui quidem soluta veritatis. Accusamus,
        adipisci debitis ea eligendi, esse et id illum iure laborum nam sapiente unde? Aliquid assumenda corporis iste.
    </div>
    <div>Deserunt distinctio ea laudantium maxime nostrum. Accusantium aut blanditiis consequatur culpa cumque
        distinctio dolorum ducimus ea eius, enim eum impedit iure neque praesentium quae quo repellat reprehenderit
        tempore temporibus vitae!
    </div>
    <div>A adipisci autem, commodi consectetur cupiditate eaque facilis harum id illo impedit ipsa magnam magni nam nemo
        nobis, odio omnis optio perferendis perspiciatis possimus quaerat quis ratione, repellendus tempore voluptas?
    </div>
    <div>Deserunt dicta doloremque dolores dolorum, eius eos eum in, nam natus necessitatibus nihil nostrum optio
        quisquam quo repellat reprehenderit sint ullam unde velit voluptates. Ipsum libero neque porro quae quasi!
    </div>
    <div>Ab accusantium labore magnam molestias reiciendis ut vitae. Architecto consequatur fuga neque officiis
        reiciendis, repudiandae soluta vero. Aliquam earum laudantium quaerat quasi vitae. Enim, hic impedit modi
        nostrum rerum sapiente.
    </div>
    <div>Alias aperiam autem delectus doloribus eum excepturi expedita hic iusto laboriosam maxime minima modi molestiae
        provident, quae, quisquam quos repellendus reprehenderit sapiente totam voluptate. Amet cumque dignissimos
        molestiae officia! Blanditiis!
    </div>
    <div>Aperiam atque laboriosam soluta temporibus. At beatae, blanditiis cupiditate ea earum eligendi esse est magnam
        maxime modi neque nisi pariatur quaerat quibusdam reiciendis veniam voluptatem, voluptatibus voluptatum.
        Architecto nobis, quae?
    </div>
    <div>Architecto consequuntur corporis ea explicabo impedit maxime odio tempora! Assumenda atque beatae consequatur
        dolorem dolores ducimus explicabo hic, ipsa laboriosam minima nisi nostrum odio optio reiciendis rem sapiente
        sed vel.
    </div>
    <div>Ad alias, aut deserunt dolorum ipsa mollitia nam odit quia quos repellendus repudiandae sequi, soluta vel.
        Animi culpa, deserunt, dicta incidunt itaque maxime molestiae nisi non pariatur, quaerat quidem reprehenderit.
    </div>
    <div>Cum et hic, illum impedit laudantium non qui. Assumenda debitis deleniti distinctio molestiae molestias
        nesciunt perspiciatis quisquam rem? Blanditiis eos facilis ipsam itaque laboriosam, nihil odio officiis
        recusandae temporibus tenetur?
    </div>
    <div>Amet asperiores assumenda atque consectetur consequatur, cumque cupiditate, dolorum esse eveniet explicabo
        fugit laboriosam praesentium sapiente sequi tempore ullam, veniam! Asperiores consectetur corporis dolore
        ducimus eius eos impedit rem, velit?
    </div>
    <div>Ab accusantium aliquid animi consequatur debitis ex facere in inventore, itaque, maiores nesciunt, nisi officia
        officiis ratione repellat? Ad eaque id in ipsa quae, quidem sapiente. Consequatur dolores porro sint.
    </div>
    <div>A, aliquid amet beatae culpa deleniti dignissimos eius expedita illum ipsum iste itaque iure labore libero nam
        nihil nobis nulla, perspiciatis possimus quaerat quam quidem ratione sequi, tempore tenetur unde!
    </div>
    <div>Ab error, facere incidunt nisi tenetur veritatis voluptate. Ab at blanditiis dolores eius enim facilis magni,
        pariatur qui temporibus vel? Aliquam deleniti facilis illo, maxime neque nobis omnis repellendus soluta?
    </div>
    <div>Ad alias aperiam consequatur consequuntur dolore eaque earum eligendi error et hic illo inventore ipsam natus
        perspiciatis recusandae repellat sint temporibus, totam ullam veniam? Cumque enim exercitationem illo quos
        veritatis?
    </div>
    <div>Aliquid beatae eaque esse et iste iure, molestias mollitia nesciunt non saepe? Ab animi aspernatur autem
        dignissimos distinctio et illum incidunt laborum nisi, officiis quae quam rem tempore ullam veritatis.
    </div>
    <div>A accusantium expedita maxime nesciunt quam, quisquam! Eius ex exercitationem laudantium magni molestias
        quidem, sed totam voluptates. Amet, consequatur, dicta distinctio iste nisi nostrum nulla odit, quam quo
        repellendus reprehenderit!
    </div>
    <div>A adipisci aliquid aperiam aspernatur aut consequuntur corporis cupiditate dolore doloribus ea eveniet iste
        maiores maxime molestiae natus nesciunt nihil officia, omnis optio quod sit soluta ullam velit vitae
        voluptatibus.
    </div>
    <div>Alias architecto aut, beatae culpa distinctio doloribus ea eligendi enim excepturi hic id magnam mollitia
        necessitatibus nostrum obcaecati officiis optio provident quidem recusandae, reiciendis repellendus, rerum sequi
        ullam veniam voluptatibus?
    </div>
    <div>Architecto assumenda beatae cumque debitis dolorem ea eum eveniet ex explicabo fugiat, libero magni, nulla
        omnis pariatur quaerat quam tempore voluptas! Accusantium cumque deleniti ipsam minus sint voluptatum. Illo,
        praesentium.
    </div>
    <div>Doloribus eius facilis id maxime natus nostrum omnis soluta voluptate. Accusamus adipisci aperiam aut beatae
        commodi consectetur expedita fugiat, laboriosam minima modi nulla numquam odit quos repellendus sed voluptas,
        voluptatum.
    </div>
    <div>Adipisci aperiam, consectetur eaque incidunt inventore ipsa laboriosam laudantium placeat sunt ut. Ex molestias
        nam necessitatibus? Cum dolore dolores, enim expedita explicabo fuga, fugit, molestias quam sapiente ut voluptas
        voluptates!
    </div>
    <div>Aspernatur dolores facere harum inventore obcaecati voluptatem! Alias inventore iure libero placeat. Blanditiis
        consequatur cum doloremque ipsam ipsum odio quam quis vero? Alias culpa distinctio dolor eaque, fugit magni
        porro.
    </div>
    <div>Blanditiis consectetur, dolores est, fugit inventore ipsum libero necessitatibus neque odit porro quas,
        quisquam sunt veniam vero voluptatem? Dolores ea perferendis porro saepe? Alias commodi labore nemo nobis quod
        rem.
    </div>
</div>
</body>
</html>